<template>
	<div id="app">
		<header>
			<h1>{{ config.name }}</h1>
			<div class="command">npm install --save {{ config.name }}</div>
			<section class="nav">
				<router-link v-for="d in routes" :key="d.path" :to="d.path">{{ d.name }}</router-link>
				<a :href="`https://github.com/${config.author}/${config.name}#usage`">文档</a>
				<a @click="toggleFullscreen">切换全屏</a>
			</section>
		</header>

		<router-view />

		<section class="more">
			<div class="section-content">了解 <a :href="`https://github.com/${config.author}/${config.name}`">更多</a>!</div>
		</section>
	</div>
</template>

<script>
import screenfull from 'screenfull';
import { routes } from './router';
import { config } from './config';

export default {
	data() {
		return {
			routes: routes.filter((route) => route.name),
			config,
		};
	},
	created() {
		document.title = config.name + '-demo';
	},
	methods: {
		toggleFullscreen() {
			if (screenfull.isEnabled) {
				screenfull.toggle(document.documentElement);
			}
		},
	},
};
</script>

<style lang="less">
@import url('./styles/imports.less');
body {
	background: white;
	margin: 0;
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

header {
	background: @primary-color;
	padding: 32px 20px 20px;

	.description {
		color: white;
		margin-top: 24px;
	}
}

.page {
	max-width: 1000px;
	margin: 0 auto;
	padding: 20px;
}

section {
	.section-content {
		margin: 0 42px;
		padding: 30px 0;
		box-sizing: border-box;
	}

	&.nav {
		text-align: center;
		background: @primary-color;
		padding: 40px 20px 0;
		.h-box();
		.box-center();

		a {
			display: inline-block;
			padding: 0 16px;
			height: 36px;
			line-height: 36px;
			color: white;
			background: lighten(@primary-color, 10%);
			border-radius: 3px;

			&:hover {
				background: lighten(@primary-color, 20%);
			}

			&:not(:last-child) {
				margin-right: 8px;
			}
		}
	}
}

.collapse {
	.section-content {
		padding: 12px 0 40px 0;
	}
}

h1 {
	margin-top: 0;
	color: white;
	font-weight: normal;
	text-align: center;
}

h2 {
	font-weight: normal;
}

a {
	color: @primary-color;
	text-decoration: none;
	cursor: pointer;

	&:hover {
		color: lighten(@primary-color, 10%);
	}
}

.command {
	background: darken(@primary-color, 10%);
	color: white;
	font-family: monospace;
	max-width: 500px;
	margin: 12px auto;
	border-radius: 2px;
	padding: 12px 24px;
	box-sizing: border-box;
}

.snippet {
	margin: 16px 0;
}

.plus {
	text-align: center;
	color: @primary-color;
	font-size: 32px;
	margin: 12px;
}

.snippets {
	background: #f7f7f7;
	border: 1px solid #f7f7f7;
	margin-bottom: 42px;
	border-radius: 0 0 3px 3px;
}

.demo {
	background: white;
	margin-top: 12px;
	border: 1px solid #eee;
	border-radius: 3px 3px 0 0;
}

.more {
	font-size: 24px;
	text-align: center;
	background: lighten(@primary-color, 45%);
}
</style>
